import React, { useState, useCallback, memo } from 'react'

// useCallback 用于得到一个固定引用值的函数，通常用它进行性能优化！

class Child1 extends React.PureComponent {
  render() {
      console.log('child1 render');
      return <div>
          <button onClick={this.props.handler}>处理1</button>
      </div>;
  }
}
 class Child2 extends React.PureComponent {
  render() {
      console.log('child2 render');
      return <div>
          <button onClick={this.props.handler}>处理2</button>
      </div>;
  }
} 
// 如果子组件是函数组件，则需要useCallback和memo配合使用「函数组件的属性浅比较是在memo中处理的，类组件是在shouldComponentUpdate中」
// const Child2 = memo(function Child2({ handler }) {
//   console.log('child2 memo render');
//   return <div>
//       <button onClick={handler}>处理2</button>
//   </div>;
// });

export default function Demo10useCallback() {
  let [val,setVal]=useState('')
  const handler1 =()=>{
    setVal('handler1')
  }

  const handler2 =useCallback(()=>{
    setVal('呵呵')
  },[])
  return (
    <div>
      <input type="text" value={val} onChange={ev =>{
        setVal(ev.target.value)
      }} />

      <Child1 handler={handler1} />
      <Child2 handler={handler2} />
    </div>
  )
}
